﻿<!--------------------------------------------------
// SuperMap iCleint for JavaScript Demo
// 作者：	    陈志伟
// 修改：
// 文件名：   AGSCacheDemo.html
// 功能：			访问ArcGIS Cache服务Demo
// 创建时间：	2012-11-13
// 最后修改时间：	2012-11-13
// 备注：	放到forJavaScript目录下，访问地址：http://localhost:8090/iserver/iClient/forJavaScript/hello.html
//-------------------------------------------------->

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>ArcGIS 瓦片服务Demo</title>
<link href='./css/sm.css' rel='stylesheet' />
<link href='./css/sm-responsive.css' rel='stylesheet' />
<link href='./css/sm-doc.css' rel='stylesheet' />
<style>
.smallmap {
	left: 10px;
	top: 10px;
	width: 800px;
	height: 500px;
	border: 1px;
}
</style>
<!--引入SuperMap核心库-->
<script src='./libs/SuperMap.Include.js'></script>
<script>
	SuperMap.Layer.AGSLayer = SuperMap
			.Class(
					SuperMap.CanvasLayer,
					{

						name : "AGSLayer",
						url : null,
						VectorGroup1 : "../map/GZMAP/_alllayers/${l}/${y}/${x}.png",
						tileSize : new SuperMap.Size(512, 512),
						tileOrigin : new SuperMap.LonLat(-5123200, 10002100), //来自服务描述文件

						initialize : function(options) {
							var me = this;

							options = SuperMap.Util.extend({
								maxExtent : new SuperMap.Bounds(474710.846655,
										2870502.075967, 604882.436126,
										3114147.596294), //来自服务描述文件
								//, 38.2188743544154, 19.1093048852764, 9.55465244263822,4.77732622131911, 2.38866311065955
								resolutions : [ 611.497756328846,
										305.748878164423, 152.874703666074,
										76.4374841249683 ]
							//来自服务描述文件

							}, options);

							SuperMap.CanvasLayer.prototype.initialize.apply(me,
									[ me.name, me.url, null, options ]);
						},

						destroy : function() {
							var me = this;
							SuperMap.CanvasLayer.prototype.destroy.apply(me,
									arguments);
							me.name = null;
							me.url = null;
						},

						clone : function(obj) {
							var me = this;
							if (obj == null) {
								obj = new SuperMap.Layer.AGSLayer(me.name,
										me.url, me.getOptions());
							}

							obj = SuperMap.CanvasLayer.prototype.clone.apply(
									me, [ obj ]);

							return obj;
						},

						getLevelForResolution : function(res) {
							var me = this;
							for ( var i = 0, len = me.resolutions.length; i < len; i++) {
								if (me.resolutions[i] === res) {
									return i;
								}
							}
						},

						getTileUrl : function(xyz) {
							var me = this, tileSize = new SuperMap.Size(256,
									256), url = me.url;
							var level = me.getLevelForResolution(me.map
									.getResolution());

							me.url = me.VectorGroup1;

							var newL = level;
							newL = "L0" + level.toString(16);
							var newX = xyz.x;
							newX = "C000000" + newX.toString(16);
							var newY = xyz.y;
							newY = "R000000" + newY.toString(16);

							var url = SuperMap.String.format(me.url, {
								x : newX,
								y : newY,
								l : newL
							});
							//alert(url);
							return url;
						},

						CLASS_NAME : "SuperMap.Layer.AGSLayer"
					});

	//全局变量
	//地图与图层
	var map, wmsLayer, drawPoint, vectorLayer, markerLayer,icon;

	//风格
	var style = {
		strokeColor : "#304DBE",
		strokeWidth : 1,
		pointerEvents : "visiblePainted",
		fillColor : "#304DBE",
		fillOpacity : 0.3
	};

	//初始化方法
	function init() {

		//国家标准的分辨率数组信息

		// 新建图层
		
		
		markerLayer = new SuperMap.Layer.Markers("Markers");
		var size = new SuperMap.Size(21,25);
		var offset = new SuperMap.Pixel(-(size.w/2), -size.h);
		icon = new SuperMap.Icon('theme/images/marker.png', size, offset);
		
		vectorLayer = new SuperMap.Layer.Vector("Vector Layer");
		//为矢量图添加样式组 
		//vectorLayer.styleMap = myStyles;
		
		//绘制点得控件
		drawPoint = new SuperMap.Control.DrawFeature(vectorLayer, SuperMap.Handler.Point);
        drawPoint.events.on({"featureadded": drawCompleted});
        
        //选择地物的控件
		 //  实例化 selectFeature 控件，调用了 onSelect 和 onUnSelect 方法
		 //	地物被选中时调用 onSelect 方法，地物被取消选中时调用 onUnSelect 方法
		 
		selectFeature = new SuperMap.Control.SelectFeature(vectorLayer,
    									{onSelect:onFeatureSelect,onUnSelect:onUnFeatureSelect});
		

		//缩放控件
		zoomInCtrl = new SuperMap.Control.ZoomBox();
		zoomOutCtrl = new SuperMap.Control.ZoomBox({
			out : true
		});

		//创建地图控件
		map = new SuperMap.Map("mapDiv", {
			controls : [ new SuperMap.Control.ScaleLine(),
					new SuperMap.Control.PanZoomBar({
						showSlider : true
					}), new SuperMap.Control.Navigation({
						dragPanOptions : {
							enableKinetic : true
						}
					}),drawPoint,selectFeature, new SuperMap.Control.LayerSwitcher(), new SuperMap.Control.MousePosition() ],
			allOverlays : true
		//, resolutions: resolutions
		}); //allOverlays属性重要，是叠加的必设属性

		/**/
		wmsLayer = new SuperMap.Layer.AGSLayer();
		map.addLayers([ wmsLayer, vectorLayer, markerLayer]);
		map.setCenter(new SuperMap.LonLat(500000, 3000000), 0);
		map.setCenter(new SuperMap.LonLat(113.097703, 28.238067), 0);

	}

	//全图浏览事件处理器
	function viewEntire() {
		map.zoomToMaxExtent();
	}
	//激活画点 
	 function drawPointGeometry() {
        //先清除上次的显示结果
        vectorLayer.removeAllFeatures();
        markerLayer.clearMarkers();

        drawPoint.activate();
	  }
	//画完点后的操作
	 function drawCompleted(drawGeometryArgs) {
	        drawPoint.deactivate();
	        var feature = new SuperMap.Feature.Vector();
	        feature.geometry = drawGeometryArgs.feature.geometry,
	        feature.style = {fillColor: "yellow",strokeColor: "red",pointRadius:9};
	        feature.id="wolagequ";
	        vectorLayer.addFeatures(feature);
	        markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(feature.geometry.x,feature.geometry.y),icon));
	        
	        console.info(feature);
	 }
	//激活选择地物的事件 
	function selectPoint(){
		selectFeature.activate();
	}
	//点击地物后的事件回调
	function onFeatureSelect(feature){
		feature.style = {fillColor:"red",strokeColor:"yellow",pointRadius:9};
		feature.layer.redraw();
		alert(feature.id);
	}
	function onUnFeatureSelect(feature){
		console.inf(feature);
		alert(feature.id);
	}
</script>
</head>
<body onload="init();">
	<div id="toolbarDiv">
		<input type="button" value="标记位置" onclick="drawPointGeometry()"/>
		<input type="button" value="选择标记" onclick="selectPoint()"/>
	</div>
	<div id="mapDiv" class="smallmap"></div>
	
</body>
</html>
